<template>
  <view class="container">
    <NavBar
      title="上传历史"
      :right-text="total ? rightText : ''"
      :right-text-color="rightTextColor"
      @rightTextClick="rightTextClick"
    />
    <view
      class="content"
      v-if="total"
      :style="isShowCheckBox ? 'padding-bottom: 180rpx;' : ''"
    >
      <view
        class="content_item"
        v-for="(item, index) in listArr"
        :key="index"
        :style="isShowCheckBox ? 'left: 80rpx' : ''"
      >
        <radio-group
          v-if="isShowCheckBox"
          class="checkbox_group"
          :data-item="item"
          @change="checkboxChange"
        >
          <label>
            <radio :value="index" :checked="item.isChoose" color="red" />
          </label>
        </radio-group>

        <StudyItem
          :itemObj="item"
          @click="clickItemObj(item)"
          :isDrafts="true"
        />
      </view>
    </view>
    <NoData v-else />
    <view class="all-delall-btn" v-if="isShowCheckBox">
      <radio-group :data-item="item" @change="checkAll">
        <label>
          <radio value="r1" :checked="isAllChoose" color="red" />
          <text v-if="isAllChoose"> 全不选 </text>
          <text v-else> 全选 </text>
        </label>
      </radio-group>
      <!-- {{delArr.length}} -->
      <button
        type="warn"
        style="background: #e86565"
        @click="delAllFn"
        class="del-btn"
        :disabled="!delArr.length"
      >
        删除
      </button>
    </view>
  </view>
</template>

<script>
// 接口
import {
  apiDangDownXinDeList,
  apiEducationList,
  apiDeleteDownList,
} from "../../net/educationalLearning.js";

import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData.vue";
import StudyItem from "./common/study_item.vue";
export default {
  components: {
    NavBar,
    NoData,
    StudyItem,
  },
  data() {
    return {
      isAllChoose: false,
      delArr: [], //删除元素id
      rightTextColor: "red",
      rightText: "删除",
      isShowCheckBox: false,
      total: 0,
      listArr: [],
      params: {
        learningType: null,
        status: 1, //上传  2 下载
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  onShow() {
    this.init();
  },
  onLoad(options) {},

  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1;
    this.listArr = [];
    this.getUploadHistoryList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.params.pageNum * this.params.pageSize > this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.getUploadHistoryList();
    }
  },
  methods: {
    // 全选
    checkAll(e) {
      console.log(e);
      this.isAllChoose = !this.isAllChoose;

      if (this.isAllChoose) {
        for (let i = 0; i < this.listArr.length; i++) {
          console.log(1111111111111111);
          this.listArr[i].isChoose = true;
          console.log(this.listArr[i]);
          this.delArr.push(this.listArr[i].recordId);
        }
      } else {
        for (let j = 0; j < this.listArr.length; j++) {
          console.log(22222222222222);
          console.log(this.listArr[j]);
          this.listArr[j].isChoose = false;
          this.delArr = [];
        }
        this.$forceUpdate();
      }

      console.log(this.listArr, this.delArr.length);
    },
    // 删除
    delAllFn() {
      let data = this.delArr.join(",");
      console.log(this.delArr);
      console.log(data);
      apiDeleteDownList(data)
        .then((res) => {
          this.params.pageSize = 10;
          this.params.pageNum = 1;
          this.listArr = [];
          this.getUploadHistoryList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        })
        .catch((err) => {
          this.params.pageSize = 10;
          this.params.pageNum = 1;
          this.listArr = [];
          this.getUploadHistoryList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        });
    },
    // 点击删除
    rightTextClick() {
      if (this.rightText == "删除") {
        this.rightText = "取消";
        this.isShowCheckBox = true;
      } else {
        this.rightText = "删除";
        this.isShowCheckBox = false;
      }
      if (this.rightTextColor == "red") {
        this.rightTextColor = "#989898";
      } else {
        this.rightTextColor = "red";
      }
    },
    // 点击item
    clickItemObj(item) {
      console.log(item);
      let params = {
        ...item,
        flag: true,
      };
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });
      uni.navigateTo({
        url: `./historyInfo`,
      });
    },
    // 删除选中复选框
    checkboxChange(e) {
      console.log(e);
      let index = e.detail.value;
      this.listArr[index].isChoose = !this.listArr[index].isChoose;
      let id = e.currentTarget.dataset.item.recordId;
      let isHas = this.delArr.indexOf(id) == -1 ? false : true;
      console.log(isHas);
      if (isHas) {
        for (let i = 0; i < this.delArr.length; i++) {
          if (id == this.delArr[i]) {
            this.delArr.splice(i, 1);
          }
        }
      } else {
        this.delArr.push(id);
      }

      this.isAllChoose =
        this.delArr.length == this.listArr.length ? true : false;
    },

    getUploadHistoryList() {
      apiDangDownXinDeList(this.params)
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.total = res.total;
            this.listArr = this.listArr.concat(res.data);
            for (let j = 0; j < this.listArr.length; j++) {
              this.listArr[j].isChoose = false;
            }

            // 处理学习类型
            for (let i = 0; i < this.listArr.length; i++) {
              for (let k = 0; k < this.typeList.length; k++) {
                if (this.listArr[i].learningType == this.typeList[k].key) {
                  this.listArr[i].Type = this.typeList[k].value;
                }
              }
            }
            uni.stopPullDownRefresh();
          } else {
            this.total = 0;
            this.listArr = [];
            uni.stopPullDownRefresh();
          }
        })
        .catch((err) => {
          console.log(err);
          this.total = 0;
          this.listArr = [];
          uni.stopPullDownRefresh();
        });
    },
    // 学习类型
    getEducationList() {
      apiEducationList()
        .then((res) => {
          if (res.code === 0) {
            this.typeList = res.data;
          } else {
            this.typeList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.typeList = [];
        });
    },
    init() {
      this.params.pageNum = 1;
      this.total = 0;
      this.listArr = [];
      this.getEducationList();
      this.getUploadHistoryList();
    },
  },
};
</script>

<style>
@import url("common/index.css");

page {
  background: #fff;
}

.content {
  width: 100% !important;
}

.study_item {
  margin: 0 auto;
}

.content_item {
  width: 700rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  left: 0;
  border-bottom: 1px solid #f3f3f3;
  padding: 8rpx;
  box-sizing: border-box;
  /* box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05); */
}

.content_item:last-child {
  border-bottom: none !important;
}

.checkbox_group {
  position: relative;
  left: -40rpx;
}

.all-delall-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;

  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 1px solid #ebedf1;

  position: fixed;
  bottom: 0;
  z-index: 100;
}

.del-btn {
  margin: 0;
  width: 340rpx;
  height: 88rpx;
  background: #e86565;
  border-radius: 8rpx;
}
</style>
